<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>购买会员</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        body {
            background-color: #e3e3e3;
        }

        .login {

            height: 77px;
            padding: 16px 23px;
            margin-bottom: 7px;
            background-color: #fff;
        }

        .login_image {
            width: 44px;
            height: 44px;
            float: left;
            border-radius: 50%;
        }

        .login_right {
            float: left;
            padding-left: 12px;
        }

        .vip_money {
            height: 201px;
            margin-bottom: 7px;
            background-color: #fff;
            padding: 19px 23px;
        }

        .list {
            padding-top: 14px;
            padding-bottom: 7px;
        }
        /*3F3A39*/

        .child_out {
            width: 33.3%;
            height: 127px;
            float: left;
            text-align: center;
        }

        .childact {
            color: #EA5413;
            border: 2px solid #EA5413 !important;
        }

        .childl {
            border: 1px solid #595959;
            border-radius: 15px;
            height: 127px;
            width: 90%;
            padding-top: 19px;
        }

        .padding_right {
            margin-right: 15px;
        }

        .test {
            position: relative;
        }
        .img_rnb {
            position: absolute;
            top: 50%;
            right: 50%;
            margin-top: 6px;
            margin-right: 29px;
            width: 12px;
        }

        .select {
            background-color: #fff;
        }

        .img_weixin {
            float: left;
            width: 26px;
            margin-top: 9px;
            margin-right: 26px;
        }

        .select_list {
            height: 40px;
            line-height: 40px;
            padding-left: 28px;
            padding-right: 24px;
            font-size:13px;
            border-top: 1px solid #d7d7d7;
        }

        .radio {
            float: right;
            width: 14px;
            padding-top: 14px;
            margin-right: 3px;
        }
        .radio1 {
            float: right;
            width: 20px;
            padding-top: 11px;

        }
        .button{
          margin: 80px 45px;
          color: #fff;
          background-color: #FF5600;
          font-size:15px;
          border-radius: 8px;
          height: 36px;
          text-align: center;
          line-height: 36px;
        }
        .nickname{
          font-size:17px;color:#a5a5a5;
          white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height:28px;
        }
        .line{
          height:0px;
          border-bottom: 2px solid #B5B6B6;
          width: 100%;
          background-color:#fff;
        }
        /*购买成功*/
        .sharesuccess {
            width: 120px;
            color: #fff;
            text-align: center;
            border-radius: 10px;
            padding: 10px;
            position: absolute;
            top: 50%;
            margin-top: -60px;
            left: 50%;
            margin-left: -60px;
            display: none;
        }

    </style>
</head>

<body>
    <div id="vm">
      <div class="line" ></div>
        <div class="login"  v-if="isloginflag">
            <img v-bind:src=avatar alt="" class="login_image">
            <div class="login_right">
                <div class="nickname">{{nickname}}</div>
                <div style="font-size:12px;color:#a5a5a5;">购买会员享更多优惠</div>
            </div>
        </div>
        <div class="login" @click="loginwin()" v-else>
            <img v-bind:src=avatar alt="" class="login_image">
            <div class="login_right">
                <div  class="nickname">{{nickname}}</div>
                <div style="font-size:12px;color:#a5a5a5;">登录享更多优惠</div>
            </div>
        </div>

        <div class="vip_money">
            <div style="font-size:16px;font-weight:600;">VIP会员</div>
            <div class="list">
                <div class="child_out" v-for="item,index in childlist" v-on:click="childactive(item,index)">
                    <div class="childl test" :class='item.ischildflag?"childact":""'>
                        <div style="font-size:15px;">{{item.name}}</div>
                        <span style="font-size:35px;margin-left:8px;">{{item.price}}</span>
                        <img src="../../image/VIP/money.png" v-if="item.ischildflag" alt="" class="img_rnb">
                        <img src="../../image/VIP/rnb.png" v-else alt="" class="img_rnb">
                    </div>
                </div>
                <div class="aui-clearfix"></div>
            </div>
        </div>

        <div class="select">
            <div style="font-size:16px;height:50px;line-height:50px;padding-left:21px">选择支付方式</div>
            <div class="select_list">
                <img src="../../image/VIP/weixin.png" alt="" class="img_weixin"><span>微信支付</span>
                <img v-bind:src="xuanzhongimg" alt="" class="radio" v-if="iswxchoiceflag">
                <img v-bind:src="weixuanimg" alt=""  v-else  class="radio1" @click="wxchoice()">
            </div>
            <div class="select_list">
                <img src="../../image/VIP/zhifubao.png" alt="" class="img_weixin"><span>支付宝支付</span>
                <img v-bind:src="xuanzhongimg" alt="" class="radio"  v-if="isalichoiceflag" >
                <img v-bind:src="weixuanimg" alt="" v-else  class="radio1" @click="alipaychoice()">
            </div>
        </div>
        <div class="button" @click="submit()">
          立即支付
        </div>
        <div class="sharesuccess">
            <img src="../../image/VIP/24.png" class="shareimg" alt="">
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/md5.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/paythiry1.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
var uid,session
    var vm = new Vue({
        el: '#vm',
        data: {
          avatar:'../../image/VIP/gray_touxiang.png',
          nickname:'昵称',
          childlist: [],
          iswxchoiceflag: true,
          isalichoiceflag: false,
          weixuanimg: '../../image/my/circle.png',
          xuanzhongimg: '../../image/114.png',
          cash:'0',
          payid:'1',
          isloginflag:false
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }

            }
        },
        methods: {
            init: function() {
                var _this = this;
                 uid=$api.getStorage('uid');
                 session=$api.getStorage('session');
                if(uid){
                  _this.getuserinfo();
                  _this.isloginflag=true
                }else{
                  _this.isloginflag=false;
                  _this.nickname='未登录';
                }
                _this.getvip();
                api.addEventListener({
                    name: 'loginsuccess'
                }, function(ret, err){
                  uid=$api.getStorage('uid');
                  _this.isloginflag=true;
                  _this.init()
                });


            },
            loginwin() {
                api.openFrame({
                    name: 'login_introduction',
                    url: '../myself/login_introduction.html',
                    rect: {
                        x: 0,
                        y: 0,
                        w: 'auto',
                        h: 'auto'
                    },
                    bounces: false,
                    bgColor: 'rgba(0,0,0,0.7)',
                    vScrollBarEnabled: true,
                    hScrollBarEnabled: true
                });
            },
            getuserinfo(){
              var _this = this;
              new rest().get('getUserInfo').datae({
                  uid: uid
              }).success(function(res) {
                  if (res.flag == 1) {
                    if(res.msg[0].img){
                      _this.avatar=res.msg[0].img;
                    }else{
                      _this.avatar='../../image/VIP/gray_touxiang.png';
                    }
                    _this.nickname=res.msg[0].nickname;
                  } else {
                      api.toast({
                          msg: res.msg[0],
                          duration: 2000,
                          location: 'middle'
                      });
                  }
              }).error(function(err) {
                  console.log(JSON.stringify(err))
              }).run()
            },
            getvip(){
              var _this = this;
              new rest().get('getVipManager').datae().success(function(res) {
                  if (res.flag == 1) {
                    if(res.msg.length!=0){
                      Vue.set(res.msg[0], 'ischildflag',true)
                      for (var i = 1; i < res.msg.length; i++) {
                          Vue.set(res.msg[i], 'ischildflag', false)
                      }
                      console.log(JSON.stringify(res.msg))
                      _this.childlist=res.msg;
                      _this.cash=res.msg[0].price;
                      _this.payid=res.msg[0].id;
                    }

                  } else {
                      api.toast({
                          msg: res.msg,
                          duration: 2000,
                          location: 'middle'
                      });
                  }
                  console.log(JSON.stringify(res))
              }).error(function(err) {
                  console.log(JSON.stringify(err))
              }).run()
            },
            childactive: function(item, index) {
                var _this = this;
                this.childlist.forEach(function(ret) {
                    ret.ischildflag = false
                })
                item.ischildflag = true;
                _this.cash=item.price;
                _this.payid=item.id;
            },
            alipaychoice: function() {
                var _this = this;
                _this.iswxchoiceflag = false;
                _this.isalichoiceflag = true;
            },
            wxchoice: function() {
                var _this = this;
                _this.iswxchoiceflag = true;
                _this.isalichoiceflag = false;
            },
            submit(){
              var _this = this;
              uid=$api.getStorage('uid');
              session=$api.getStorage('session');
              if(_this.iswxchoiceflag){
                var data1={
                  _uid:uid,
                  session:session,
                  cash:_this.cash,
                  type:21,
                  pay_id:_this.payid
                }
              }else{
                var data1={
                  _uid:uid,
                  session:session,
                  cash:_this.cash,
                  type:11,
                  pay_id:_this.payid
                }
              }
              if(uid){
                thirdpay.pay(data1,_this.iswxchoiceflag)
              }else{
                _this.loginwin()

              }
              api.addEventListener({
                  name: 'paysuccess'
              }, function(ret, err){
                $('.sharesuccess').css('display', 'block');
                setTimeout(function() {
                    $('.sharesuccess').css('display', 'none');
                    // api.closeWin();
                }, 1500);
              });

            }

        }
    })


</script>

</html>
